<template>
	<view class="bottom" id="content">
		<view class="tabbar">
			<view class="tabbar__item"  v-for="(item,index) in TabBarList"  @click="onTabBar(item,index)"  :key="index">
        <view :class="{'on':tabBarShow===index}">
				<view class="tabbar__svg" :id="item.classid">
					
				</view>
				<view class="tabbar__name">{{item.name}}</view>
			</view>
		</view>
      </view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
        TabBarList:[
          {
            index: 0,
            name: '最新',
            classid:'home'
          },
          {
            index: 1,
            name: '热门',
            classid:'cate'
          }

        ],
			}
		},
		onLoad() {

		},
    mounted() {
      try {
        const res = uni.getSystemInfoSync();
        let that = this;
        // 获取系统信息
        uni.getSystemInfo({
          success(res) {
            console.log(res.brand) //手机牌子
            console.log(res.model) //手机型号
            console.log(res.screenWidth) //屏幕宽度
            console.log(res.screenHeight) //屏幕高度
            that.codeheight = Math.round(res.screenHeight);
            that.phoneModel =res.model
            if(res.model.search('iPhone')){
              that.isOverall = 0;
            }else if(Math.round(res.screenHeight)>740){
              that.isOverall = 1;
            }
            console.log(that.isOverall);
          }
        });
      } catch (e) {
        // error
      }
    },
    props:{
      tabBarShow: {
        type: Number,
        default: 0,
      }
    },
		methods: {


      onTabBar(item,index){
        console.log(index);
        switch (index){
          case 0:
            wx.switchTab({
              url:'/pages/index/index'
            })
            break;
          case 1:
            wx.switchTab({
              url:'/pages/hot/index'
            })
            break;
        }
      }
		}
	}
</script>

<script module="svgs" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.svgs === 'function') {
				this.initSvgs()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/svg.js'
				script.onload = this.initSvgs.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initSvgs() {
				var draw = SVG().addTo('#content').size(0, 0);
				var symbola = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbola.path('M9.82,1.5A11.13,11.13,0,0,0,1.5,12.33a11.08,11.08,0,0,0,11,11.17,11.08,11.08,0,0,0,11-11.17A11.16,11.16,0,0,0,16.33,1.86V12.33a3.9,3.9,0,1,1-.08-.78')
				var symbolb = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbolb.path('M18.16,23.5h2.16a3.19,3.19,0,0,0,3.18-3.18V4.68A3.19,3.19,0,0,0,20.32,1.5H8.81l0,4.19A3.15,3.15,0,1,1,5.69,8.83H1.5V20.32A3.19,3.19,0,0,0,4.68,23.5h8.83s-.49-5.76,4.75-8.38')
				
				 //图标颜色渐变
		
				//home-icon首页图标
				var homesvg = SVG().addTo('#home');
				homesvg.use(symbola).attr({ class:'icon' });
				homesvg.use(symbola).attr({ class:'icon' });
				homesvg.use(symbola).attr({ class:'icon' });
				homesvg.use(symbola).attr({ class:'icon' });
				homesvg.use(symbola).attr({ class:'icon' });
				
				//cate-icon探索图标
				var catesvg = SVG().addTo('#cate');
				catesvg.use(symbolb).attr({ class:'icon' });
				catesvg.use(symbolb).attr({ class:'icon' });
				catesvg.use(symbolb).attr({ class:'icon' });
				catesvg.use(symbolb).attr({ class:'icon' });
				catesvg.use(symbolb).attr({ class:'icon' });
				
				
			
			}  
		}  
	}  
</script>


<style scoped lang="scss">
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: $navHeight;
		background: #fff;
		z-index: 10;
	}

	/*苹果x适配 H5APP*/
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xs适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xr适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}
	
</style>